/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-06 11:10:58
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-06 14:58:50
 */
import React from 'react'

class Lcom extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }

  state = {
    n: 1,
  }

  handle = () => {
    // 这里是异步
    /* 
    
    state:{},======state(){return {}}
    mutations:{}
    
    */
    this.setState(
      () => {
        return {
          n: this.state.n + 1,
        }
      },
      () => {
        // 表示state中的数据更新渲染完之后在执行
        // console.log(122)
        document.title = '标题' + this.state.n
      }
    )
    // setTimeout(() => {
    //   console.log(this.state.n, '验证setState是异步')
    // }, 2000)
    console.log(this.state.n, '验证setState是异步')
  }

  render() {
    /* 执行时机===会执行多次
    1-初次进入就会执行
    2-只要state中的状态发生改变就会立即执行
    */
    console.log('render')
    //this.setState({})
    return (
      <div>
        御剑乘风来,除魔天地间!===Lcom.js======={this.state.n}===
        <button onClick={() => this.handle()}>钩子函数</button>====
        <button id="btn">钩子函数====id=btn</button>
        {/* <button
          onClick={() => {
            this.setState({
              n: this.state.n + 1,
            })
          }}
        >
          钩子函数
        </button> */}
      </div>
    )
  }

  // componentWillMount() {
  //   console.log('componentWillMount')
  // }

  componentDidMount() {
    // 类似vue2中的mounted或者vue3中的 onMount
    // console.log('componentDidMount')
    var btn = document.querySelector('#btn')
    btn.addEventListener('click', () => {
      // console.log(this, 'btn')

      this.setState({
        n: 3,
      })
      console.log(this.state.n, '验证setState是同步')
    })
  }
}
export default Lcom
